<template>
  <div id="box">
    <div class="control" :class="{play: !play, pause: play}" @click="clickControl"></div>
    <div class="number-circle" v-for="(num, index) of timeNum" :key="index" :class="{active:index<=timeNow}" @click="chooseNum(index)">
      <div class="circle"></div>
      <div>{{num}}</div>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import eventBus from '../../util/event-bus.js'
  import MYCONFIG from '../../myconf.js'

  export default {
    name: 'HotMapControl',
    data () {
      return {
        timeNum: ["0:00", "1:00", "2:00", "3:00", "4:00", "5:00", "6:00", "7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"],
        timeNow: 0,
        play: false,
        animation: null,
        speed: 1500
      }
    },
    mounted(){
      eventBus.$emit('changeMapCenterAndZoom', MYCONFIG.map.center, 5);
      this.updateCarType({
        type: 0,
        id: 'all',
        name: '全部车辆'
      });
    },
    computed: {
      ...mapGetters(['hotMap_time'])
    },

    methods: {
      ...mapMutations(['updateCarType']),
      chooseNum: function(num) {
        this.timeNow = num;
      },
      clickControl: function() {
        this.play = !this.play;
        if (this.play) {
          this.playAnimation();
        } else {
          this.pauseAnimation();
        }
      },
      playAnimation: function() {
        this.animation = setInterval(() => {
          let time = this.timeNow + 1;
          if (time > 23) {
            time = time - 24;
            this.pauseAnimation();
          }
          this.setTimeNow(time);
        }, this.speed);
      },
      pauseAnimation: function() {
        this.play = false;
        clearInterval(this.animation);
      },
      setTimeNow: function(num) {
        this.timeNow = num;
      }
    },
    beforeDestroy: function () {
      this.pauseAnimation();
      eventBus.$emit('changeMapCenterAndZoom', MYCONFIG.map.center, MYCONFIG.map.zoom);
      this.updateCarType({
        type: 0,
        id: 'all',
        name: '全部车辆'
      });
    },
    watch: {
      hotMap_time: function() {
        this.pauseAnimation();
        this.setTimeNow(0);
      },
      timeNow: function() {
        eventBus.$emit('heatMapTimeChange', this.timeNow);
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../static/common/common.scss";
  #box{
    position: absolute;
    right: 60px;
    bottom: 20px;
    z-index: 100;
    width: 65%;
    height: 100px;
    @include inputBorder;
    pointer-events: auto;
    border-radius: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left:15px;
    padding-right: 30px;
    background-color: rgba(14, 14, 23, 0.6);

    .control {
      width: 64px;
      height: 64px;
      cursor: pointer;

      &.play {
        background-image: url("../../../static/images/mutiplyHistory/play.png");
      }
      &.pause {
        background-image: url("../../../static/images/mutiplyHistory/pause.png");
      }
    }

    .number-circle {
      height: 64px;
      opacity: 0.5;
      font-size: $font-normal;
      color: $font-color-normal;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      cursor: pointer;
      width: 42px;

      .circle {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #00d5c1;
        margin: 0 auto;
      }

      &.active {
        opacity: 1;
      }
    }

  }
</style>
